<template>
  <el-card>
    <!--  skuList数据-->
    <el-table :data="skuList" border style="width: 100%">
      <el-table-column type="index" label="序号" width="80" align="center"/>
      <el-table-column label="banner">
        <template v-slot="{row}">
          <div>
            <el-image
                :preview-src-list="[row.skuDefaultImg]"
                :preview-teleported="true"
                style="width:100px"
                :src="row.skuDefaultImg" fit="fill"
                :lazy="true">
            </el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="skuName" label="名称"/>
      <el-table-column prop="price" label="价格"/>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button v-if="row.isSale===0" type="success" size="small" icon="ele-Open" title="上架商品"
                     @click="addPutaway(row.id)">
            上架
          </el-button>
          <el-button v-else type="danger" size="small" icon="ele-TurnOff" title="下架商品"
                     @click="soldOut(row.id)">
            下架
          </el-button>
          <el-button @click="ElMessage.info('功能开发中')" type="warning" size="small" icon="ele-Edit"
                     title="修改sku"></el-button>
          <el-button type="info" size="small" @click="toSkuDetail(row.id)" icon="ele-InfoFilled" title="查看sku详情">
          </el-button>
          <el-button type="danger" @click="removeItem(row.id)" size="small" icon="ele-Delete"
                     title="删除sku"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    商品详情-->
    <el-drawer v-model="drawer" title="商品详情页" size="50%">
      <el-row>
        <el-col :span="5">名称</el-col>
        <el-col :span="16">{{ SkuDetail.skuName }}</el-col>
      </el-row>
      <el-row style="margin: 10px 0">
        <el-col :span="5">描述</el-col>
        <el-col :span="16">{{ SkuDetail.skuDesc }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">价格</el-col>
        <el-col :span="16">{{ SkuDetail.price }}</el-col>
      </el-row>
      <el-row style="margin: 10px 0">
        <el-col :span="5">平台属性值</el-col>
        <el-col :span="16">
          <el-tag
              type="danger"
              v-for="(attrValue) in SkuDetail.skuAttrValueList"
              :key="attrValue.id"
          >
            {{ attrValue.valueName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">销售属性值</el-col>
        <el-col :span="16">
          <el-tag
              type="danger"
              v-for="(saleAttrValue) in SkuDetail.skuSaleAttrValueList"
              :key="saleAttrValue.id"
          >
            {{ saleAttrValue.saleAttrValueName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row style="margin: 10px 0">
        <el-col :span="5">商品图片</el-col>
        <el-col :span="18">
          <el-carousel ref="carousel" indicator-position="outside" height="400px">
            <el-carousel-item v-for="item in SkuDetail.skuImageList" :key="item.id">
              <el-image :src="item.imgUrl" style="height:400px;width: 466px"/>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
    <!-- 分页器 -->
    <el-pagination
        style="margin-top: 10px"
        v-model:current-page="page"
        v-model:page-size="limit"
        :pager-count="5"
        :page-sizes="[10, 20, 30, 40]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    />
  </el-card>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "Sku",
});
</script>

<script setup lang="ts">
import {nextTick, onMounted, ref, watch} from "vue";
import {
  reqDeleteItemAsync,
  reqGetCancelSaleAsync, reqGetDetailAsync,
  reqGetOnSaleAsync,
  reqGetSkuListAsync, type SkuItemDetailType,
  type SkuItemType
} from "@/api/sku";
import {ElCarousel, ElMessage} from "element-plus/es";

// 当前页
const page = ref(1)

// 每页条数
const limit = ref(10)

// 总数量
const total = ref(1)

// skuList列表数据
const skuList = ref<SkuItemType[]>([])

const getSkuList = async () => {
  const result = await reqGetSkuListAsync(page.value, limit.value)
  skuList.value = result.records
  total.value = result.total
}
// 初始获取skuList数据
onMounted(() => {
  getSkuList()
})

// 监听当前页和每页条数的改变  及时渲染对应数据
watch([page, limit], () => {
  getSkuList()
})

// 商品上架功能
const addPutaway = async (skuId: number) => {
  console.log(skuId)
  try {
    await reqGetOnSaleAsync(skuId)
    ElMessage.success('上架成功')
    // 刷新页面
    await getSkuList()
  } catch (e) {
    ElMessage.error('上架失败')
  }
}

// 商品下架功能
const soldOut = async (skuId: number) => {
  console.log(skuId)
  try {
    await reqGetCancelSaleAsync(skuId)
    ElMessage.success('下架成功')
    // 刷新页面
    await getSkuList()
  } catch (e) {
    ElMessage.error('下架失败')
  }
}


// 删除功能
const removeItem = async (skuId: number) => {
  try {
    await reqDeleteItemAsync(skuId)
    ElMessage.success('删除成功')
    // 刷新页面
    await getSkuList()
  } catch (e) {
    ElMessage.error('删除失败')
  }
}

// 控制抽屉显示隐藏
const drawer = ref(false)

// 保存商品详情数据
const SkuDetail = ref<SkuItemDetailType>({
  id: 0,
  spuId: 0, //所在的spuId
  price: 0, //当前sku的价格
  skuName: '', //当前sku的名称
  skuDesc: '', //当前sku的描述
  weight: '', //当前sku的重量
  tmId: 0,//当前sku所在的品牌id
  category3Id: 0,//当前sku所在的三级分类的id
  skuDefaultImg: '', //当前sku的默认的图片
  isSale: 0,//当前sku是否上架
  skuImageList: [], //当前sku图片列表
  skuAttrValueList: [], //当前sku属性值列表
  skuSaleAttrValueList: [] //当前sku销售属性值列表
})

// 查看商品详情
const toSkuDetail = async (spuId: number) => {
  // 显示抽屉 也就是 商品详情
  drawer.value = true
  try {
    const re = await reqGetDetailAsync(spuId)
    SkuDetail.value = re

    //在拿到数据之后，我们手动的切换幻灯片(放在异步)  解决了 轮播图有时候会不显示的问题
    nextTick(() => {
      carousel.value?.setActiveItem(0);
    });
  } catch (e: any) {
    ElMessage.error(e.message)
  }
}

//注意：如果需要给组件定义类型，我们可以使用如下的方式
const carousel = ref<InstanceType<typeof ElCarousel> | null>(null);
</script>

<style scoped lang="scss">
.el-pagination {
  justify-content: center;
}

.carousel {
  width: 400px;

}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* :deep()  sass  的深度选择器  改变了颜色*/
:deep(.el-carousel__indicators--outside button ) {
  background-color: #f6bbbb;
}

/* 改变轮播图下面的图片样式 */
/*:deep(.el-carousel__indicator) {
  width: 10px;
  height: 10px;
  background: deepskyblue;
  border-radius: 50%;
  margin: 0 10px;

  &.is-active {
    background: pink;
  }
}*/
</style>